<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2023-12-05 14:18:07
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2024-01-16 15:50:04
 * @FilePath: \mdbj-ui\src\views\datamanager\road\detailPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container" >
    <el-row>
      <el-col :span="24" class="title-row">
        <span :style="{ color: theme }">| {{roadname}}-详细信息</span>
      </el-col>
      <el-col :span="24">
        <el-tabs v-model="activeName">
          <!-- 详情面板1 -->
          <el-tab-pane label="基本信息" name="roadPanel">
            <el-row>
              <el-descriptions :column="2" border :contentStyle="contentStyle" :labelStyle="labelStyle" size:small
                v-if="formData">
                <!-- <el-descriptions-item>
                  <template slot="label"> OBJECTID </template>
                  {{ formData.objectid }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                  <template slot="label">道路编码</template>
                  {{ formData.code }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">道路名称</template>
                  {{ formData.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 保洁单位 </template>
                  <dict-tag :options="dict.type.sys_cleancompany" :value="formData.cleancompany"></dict-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 道路等级 </template>
                  <dict-tag :options="dict.type.sys_roadclass_js" :value="formData.roadclass_js"></dict-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">参考长度(m)</template>
                  {{ formData.ref_length}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">道路长度(m)</template>
                    <div v-if="formData.length">
                      {{formData.length.toFixed(2)}}
                    </div>
                    <div v-if="!formData.length">
                      {{formData.length}}
                    </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">机动车道宽度(m)</template>
                  {{ formData.width }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">机动车道数量</template>
                  {{ formData.lanenumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">非机动车道数量</template>
                  {{ formData.feijdcds }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 是否有人行道 </template>
                  <dict-tag :options="dict.type.sys_sfsidewalk" :value="formData.sfsidewalk"></dict-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">起点</template>
                  {{ formData.startpoint }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">止点</template>
                  {{ formData.endpoint }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 路面材料 </template>
                  <dict-tag :options="dict.type.sys_pavementmaterials" :value="formData.pavementmaterials"></dict-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">管理单位</template>
                  {{ formData.managementunit }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">原路名</template>
                  {{ formData.oldname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">道路编号</template>
                  {{ formData.roadnumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 道路状态 </template>
                  <dict-tag :options="dict.type.road_data_status" :value="formData.data_status"></dict-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">备注</template>
                  {{ formData.note }}
                </el-descriptions-item>
              </el-descriptions>
            </el-row>
          </el-tab-pane>
          <!-- 详情面板2 -->
          <!-- roadsurfaceDataPanel 依赖roadCode属性，所以需要等roadCode有值后再渲染-->
          <el-tab-pane label="道路面信息" name="roadsurfacePanel">
            <roadsurfaceDataPanel
              ref="roadsurfaceDataPanel"
              :mapview="mapview"
              :isedit="isedit"
              :roadcode="roadcode"
              :roadname="roadname"
              :roadcleancompany="roadcleancompany"
              :feature="feature"
              :activeName="activeName"
              :localname="localname"
              v-if="roadcode" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 修改关闭按钮 -->
    <el-row>
      <div class="footer">
        <el-button
          v-hasPermi="['datamanager:road:edit']"
          type="primary"
          plain
          icon="el-icon-edit"
          @click="handleUpdate"
        >修 改</el-button>
        <el-button type="primary" plain icon="el-icon-circle-close" @click="cancel">关 闭</el-button>
      </div>
    </el-row>

  </div>
</template>

<script>
  import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
  import roadsurfaceDataPanel from "./../roadsurface/dataPanel";

  export default {
    components: {
      FeatureLayer,
      roadsurfaceDataPanel: roadsurfaceDataPanel,
    },
    inject: ["toggleComponent"],
    props: {
      mapview: { default: () => { } },
      paramObj: { default: () => { } },
    },
    dicts: ["sys_roadclass_js", "sys_cleancompany",
      "sys_roadfunction", "sys_sfsidewalk",
      "sys_pavementmaterials", "road_data_status"],
    computed: {
    theme() {
      return this.$store.state.settings.theme;
      },
    },
    data() {
      return {
        // 初始面板
        activeName: "roadPanel",
        // 定义当前组件名称
        localname:"detailPanel",
        // 是否启用增加道路面
        roadsurfacefeatureLayer:undefined,
        isedit: undefined,
        roadcode: undefined,
        roadname: undefined,
        roadcleancompany: undefined,
        loading: undefined,
        // 修改表单参数
        formData: {},
        // 当前页正在编辑的要素
        feature: undefined,
        featureLayer: undefined,
        tableData: [],
        // 内容样式
        contentStyle: {
          "text-align": "left",
          "word-break": "break-all", //过长时自动换行
        },
        // label样式
        labelStyle: {
          // width: "100px",
          "text-align": "left",
          "min-width": "120px",
          width: "150px",
          "background-color": "#E8F4FF",
        },

      }
    },
    activated() {
      console.log("activated");
      let _self = this;
      console.log(_self.paramObj);
      _self.feature =_self.paramObj.feature;
      _self.formData = _self.feature.attributes;
      _self.roadcode = _self.feature.attributes.code;
      _self.roadname = _self.feature.attributes.name;
      _self.roadcleancompany= _self.feature.attributes.cleancompany;
      console.log(_self.roadcode);
      _self.featureLayer = _self.paramObj.featureLayer;
    },
    deactivated() {
      let _self = this
      console.log("detailPanel deactivated");
      _self.featureLayer = undefined;
      _self.feature = undefined;
      _self.featureLayerView = undefined;
      _self.roadcode = undefined;
      _self.activeName="roadPanel";
    },
    methods: {
      cancel() {
        let _self = this;
        _self.highlight?.remove();
        _self.feature= undefined;
        _self.formData= undefined;
        _self.roadcode= undefined;
        _self.roadname = undefined;
         // 移除道路面数据
        this.$refs.roadsurfaceDataPanel.removeRoadSurfaceLayer();
        this.toggleComponent("dataPanel");
      },
      /**
       * @description: 调用道路单线修改面板或调用道路面增加面板
       * @return {*}
       */
      handleUpdate() {
        let _self = this;
        const paramObj = {
          mapview: _self.mapview,
          rodecode: _self.roadcode,
          feature: _self.feature,
          featureLayer: _self.featureLayer,
          activeName: _self.activeName,
        };
        this.cancel();
        this.toggleComponent("editPanel", paramObj);
      },
      submitForm() {
        let _self = this;
      },
    },
  };
</script>

<style>
  .title-row {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 1vh;
  }

  .footer {
    margin-top: 1vh;
    display: flex;
    justify-content: center;
  }
</style>
